<template>
  <div class="reportFormPage">
    <topOperation />
      <el-form ref="form" :model="form">
        <div id="domid">
          <el-row>
            <el-col :span="5" :offset="19">
              <div class="pageNumBox">第 1 页，共 1 页</div>
            </el-col>
          </el-row>
          <div class="topTwoBox">
            <div class="centerName">沥青闪点与燃点试验检测记录表（克利夫兰开口杯法）</div>
            <div class="codeText">BGLQ05002F</div>
          </div>
          <div class="threeTopBox">
            <div class="threeItem1">检测单位名称：</div>
            <div class="threeItem2">
              {{ form.jiancdwmc }}
            </div>
            <div class="threeItem3">
              记录编号：<br>
              {{form.jilbh}}
            </div>
          </div>
          <!-- 表格基本信息 -->
          <table style="width: 100%;" border="1" height="310px" bordercolor="#000000" cellpadding="2" cellspacing="0" align="center">
            <tbody style="width: 100%;">
              <tr>
                <td height="25" align="center">工程名称</td>
                <td style="word-wrap: break-word; word-break :break-all;" colspan="3" bgcolor="#ffffff">
                  <span>{{form.gongcmc}}</span>
                </td>
              </tr>
              <tr>
                <td height="25" align="center">工程部位/用途</td>
                <td style="word-wrap: break-word; word-break :break-all;" colspan="3" bgcolor="#ffffff">
                  <el-input type="text" v-model="form.gongcbwyt"/>
                </td>
              </tr>
              <tr>
                <td height="25" align="center">样品信息</td>
                <td style="word-wrap: break-word; word-break :break-all;" bgcolor="#ffffff" colspan="3">
                  <!-- <div style="width:100%;background-color:white; cursor: pointer;" @click="ypDialogVisible = true"> -->
                  <div style="width:100%;background-color:white; ">
                   {{form.yangpxx}}
                   <!-- 样品编号:  {{ form.bsYpVo ? form.bsYpVo.ypNum : '' }}
                   样品分类:  {{ form.bsYpVo ? form.bsYpVo.ypClass : '' }}
                   样品描述:  {{ form.bsYpVo ? form.bsYpVo.ypDescribe : '' }}  -->
                   <!-- <i class="el-icon-edit"></i> -->
                  </div>
                  <div>
                     <!-- 样品选择弹窗 -->
                    <el-dialog
                      title="样品信息"
                      :visible.sync="ypDialogVisible"
                      width="30%"
                      :before-close="handleClose">
                      <!-- <div style="width: 100%;">
                        <el-form-item label="样品编号:">
                          <el-input v-model="form.bsYpVo.ypNum" placeholder="请输入样品编号"/>
                        </el-form-item>

                        <el-form-item label="样品分类:">
                          <el-input v-model="form.bsYpVo.ypClass" placeholder="请输入样品分类" />
                        </el-form-item>

                        <el-form-item label="样品描述:">
                          <el-input v-model="form.bsYpVo.ypDescribe" placeholder="请输入样品描述" />
                        </el-form-item>
                      </div> -->
                      <span slot="footer" class="dialog-footer">
                        <el-button @click="ypDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="ypDialogVisible = false">确 定</el-button>
                      </span>
                    </el-dialog>
                  </div>
                </td>
              </tr>
              <tr>
                <td height="25" align="center">检测依据</td>
                <td bgcolor="#ffffff">
                  <div>
                    <el-input type="text" v-model="form.jiancyj"/>
                  </div>
                </td>
                <td height="25" align="center">判定依据</td>
                <td bgcolor="#ffffff">
                  <div style="width: 100%;">
                    <el-autocomplete style="width: 100%; cursor: pointer;"
                      v-model="form.pandyj"
                      suffix-icon="el-icon-edit"
                      :fetch-suggestions="querySearch"
                      placeholder="请点击选择或输入内容"
                      @select="handleSelect"
                    ></el-autocomplete>
                  </div>
                </td>
              </tr>
              <tr>
                <td height="30" align="center">主要仪器设备<br>名称及编号</td>
                <td colspan="3" bgcolor="#ffffff">
                  <div style="width:100%;background-color:white; cursor: pointer;" @click="dialogVisible = true">
                    <!-- 多功能电动击实仪(FSZB-TG-03) -->

                    <div v-if="selectedItems.length">
                      <ul>
                        <li v-for="item in selectedItems" :key="item.key">
                          <!-- {{ item.label }} (Key: {{ item.key }}) -->
                          {{ item.label }} ( {{ item.key }})
                        </li>
                      </ul>
                    </div>
                    <i class="el-icon-edit"></i>
                  </div>
                  <!-- 设备选择弹窗 -->
                  <el-dialog
                    title="提示"
                    :visible.sync="dialogVisible"
                    width="30%"
                    :before-close="handleClose">
                    <div style="width: 100%;">
                      <!-- 穿梭选择框 -->
                      <el-transfer
                        v-model="deviceValue"
                        :props="props"
                        @change="handleChange"
                        :data="deviceData">
                      </el-transfer>
                    </div>
                    <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                  </el-dialog>
                </td>
              </tr>
            </tbody>
          </table>
          <!-- 取样地点 -->
          <table cellpadding="1" cellspacing="0" bordercolor="#000000"
            style="width: 100%; border-right: 2px solid black; border-left: 2px solid black;  border-collapse: collapse;  height: 30px; text-align: center;"
            align="center" border="0" tbindex="0">
            <tr>
                <td align="center" height="24px"
                  style="border-right:1px solid black;border-bottom:1px solid black;">取样地点</td>
                <td bgcolor="white"
                  style="border-right:1px solid black;border-bottom:1px solid black;">
                  <el-input type="text" style="text-align:left;height:15px;" v-model="form.sdBsInfoVo.quydd" />
                </td>
                <td align="center" height="24px"
                  style="border-right:1px solid black;border-bottom:1px solid black;">沥青产地</td>
                <td bgcolor="white"
                  style="border-right:1px solid black;border-bottom:1px solid black;">
                  <el-input type="text" style="text-align:left;height:15px;" v-model="form.sdBsInfoVo.liqcd" />
                </td>
                <td align="center" height="24px"
                  style="border-right:1px solid black;border-bottom:1px solid black;">沥青种类及标号</td>
                <td bgcolor="white"
                  style="border-right:1px solid black;border-bottom:1px solid black;">
                  <el-input type="text" style="text-align:left;height:15px;" v-model="form.sdBsInfoVo.liqzljbh" />
                </td>
              </tr>
          </table>
          <!-- 沥青试验表格 -->
          <table cellpadding="1" cellspacing="0" bordercolor="#000000"
            style="width: 100%; border-right: 2px solid black; border-top: none; border-left: 2px solid black; border-bottom: 2px solid black; border-collapse: collapse;
            height: 30px; text-align: center;"
            align="center" border="1" tbindex="0">
            <tbody>
              <tr trindex="0">
                <td  height="30">试验次数</td>
                <td  height="30">闪点温度(℃)</td>
                <td  height="30">闪点平均值(℃)</td>
                <td  height="30">燃点温度(℃)</td>
                <td  height="30">燃点平均值(℃)</td>
                <td  height="30">修正后闪点(℃)</td>
                <td  height="30">修正后燃点(℃)</td>
              </tr>
              <tr trindex="1">
                <td  height="30">第一次</td>
                <td bgcolor="white"
                  style="border-right:1px solid black;border-bottom:1px solid black;">
                  <el-input type="text" style="text-align:left;height:15px;" v-model.number="form.sdBsInfoVo.shand1"/>
                </td>
                <td bgcolor="white" rowspan="2"
                  style="border-right:1px solid black;border-bottom:1px solid black;">
                  <el-input type="text" style="text-align:left;height:15px;" v-model.number="form.sdBsInfoVo.shandpjz" :value="shandpjz" readonly/>
                </td>
                <td bgcolor="white"
                  style="border-right:1px solid black;border-bottom:1px solid black;">
                  <el-input type="text" style="text-align:left;height:15px;" v-model.number="form.sdBsInfoVo.rand1"/>
                </td>
                <td bgcolor="white" rowspan="2"
                  style="border-right:1px solid black;border-bottom:1px solid black;">
                  <el-input type="text" style="text-align:left;height:15px;" v-model.number="form.sdBsInfoVo.randpjz" :value="randpjz" readonly/>
                </td>
                <td bgcolor="white" rowspan="2"
                  style="border-right:1px solid black;border-bottom:1px solid black;">
                  <el-input type="text" style="text-align:left;height:15px;" v-model.number="form.sdBsInfoVo.xiuzhsd"/>
                </td>
                <td bgcolor="white" rowspan="2"
                  style="border-right:1px solid black;border-bottom:1px solid black;">
                  <el-input type="text" style="text-align:left;height:15px;" v-model.number="form.sdBsInfoVo.xiuzhrd"/>
                </td>
              </tr>
              <tr trindex="2">
                <td  height="30">第二次</td>
                <td bgcolor="white"
                  style="border-right:1px solid black;border-bottom:1px solid black;">
                  <el-input type="text" style="text-align:left;height:15px;" v-model.number="form.sdBsInfoVo.shand2"/>
                </td>
                <td bgcolor="white"
                  style="border-right:1px solid black;border-bottom:1px solid black;">
                  <el-input type="text" style="text-align:left;height:15px;" v-model.number="form.sdBsInfoVo.rand2"/>
                </td>
              </tr>
            </tbody>
          </table>
          <!-- 附加声明-->
          <table cellpadding="2" cellspacing="0" bordercolor="#000000"
            style="width: 100%; border-right:  2px solid black;  border-left: 2px solid black; border-top-style: none;  border-bottom: 2px solid black; border-collapse: collapse; margin: none;">
            <tbody>
              <tr>
                <td style="border-style: none" bgcolor="#ffffff" height="500">
                  <el-input type="textarea" v-model="form.fujsm" style="border-width:0px;height:100%;width:99%;" />
                </td>
              </tr>
            </tbody>
          </table>
          <!-- 表底-->
          <table border="0" cellpadding="0" cellspacing="0" align="center"
            style="width: 100%; border-collapse:collapse;height:22px;">
            <tbody>
              <tr>
                <td width="10%" align="right">检测：</td>
                <td width="15%" align="left"></td>
                <td width="10%" align="right">审核：</td>
                <td width="15%" align="left"></td>
                <td width="10%" align="right">批准：</td>
                <td align="left" width="15%"></td>
                <td width="10%">日期：</td>
                <td align="left" width="15%">
                  <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </el-form>
  </div>
</template>

<script>
import topOperation from "./components/topOperation.vue";
import {
  lqbgBsInfo,addLqLqdlsybgBsInfo,getInfoByReportId,updateLqLqdlsybgBsInfo
} from "@/api/report_lq/lqLqdlsybgBsInfo";
import { listBsType } from "@/api/sycs/bsJudgeBase";
import { listBsInstrument} from "@/api/dept/bsInstrument";
export default {
  name: "soilTable",
  async mounted() {
    const queryString = window.location.search;
    const urlParams = new URLSearchParams(queryString);
    const reportId = urlParams.get('reportId');
    const deptId = urlParams.get('deptId');
    this.obj.reportId = reportId
    this.obj.deptId = deptId

    this.restaurants =  await this.loadAll();
    this.deviceData = await this.deviceList();

    // 根据reportId查询 记录表详细信息
    await this.getInfoByReport(this.obj);

  },
  data() {
    return {
      deviceData: [],
      deviceValue: [],
      selectedItems: [],
      // 按钮loading
      buttonLoading: false,
      props: {
        key: 'key',
        label: 'label'
      },
      dialogVisible: false,
      ypDialogVisible: false, // 样品弹窗
      pdData: [],
      state1: '',
      restaurants: [],
      form: {
        excelId: undefined,
        gongcbwyt: undefined,
        gongcmc: undefined,
        jiancdwmc: undefined,
        jiancyj: undefined,
        jilbh: undefined,
        pandyj: undefined,
        shiyjcrq: undefined,
        shiytj: undefined,
        yangpxx: undefined,
        yangpxxid: undefined,
        reportId: undefined,
        bsYpVo: { // 样品数据
          ypNum: undefined,
          ypCode: undefined,
          ypClass: undefined,
          ypDescribe: undefined,
        },

        sdBsInfoVo: { // 闪点数据
          shandpjz: 0,
          shand1: 0,
          shand2: 0,
          randpjz: 0,
          rand1: 0,
          rand2: 0,
          xiuzhsd: 0,
          xiuzhrd: 0,
          quydd: undefined,
          liqcd: undefined,
          liqzljbh: undefined,
        },
        deviceArr: [],
        fujsm: "" //附加声明
      },
      obj: {
        deptId: undefined,
        reportId: undefined
      },
      deptName:'',
      deptId:'',
      readonly: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        judgeName: undefined,
        syType: undefined,
      },
      bsInstrumentList: []
    };
  },
  components: {
    topOperation
  },
  computed: {
    shandpjz() {
      let avg = (parseFloat(this.form.sdBsInfoVo.shand1) + parseFloat(this.form.sdBsInfoVo.shand2)) / 2;
      this.form.sdBsInfoVo.shandpjz = avg;
      return avg;
    },
    randpjz() {
      let randAvg = parseFloat((this.form.sdBsInfoVo.rand1) + parseFloat(this.form.sdBsInfoVo.rand2)) / 2;
      this.form.sdBsInfoVo.randpjz = randAvg;
      return randAvg;
    },
  },
  methods: {
      querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      async loadAll() {
        // 获取沥青判定依据
        this.queryParams.parentId = 74 //道路石油沥青试验报告ID
        let response = await listBsType(this.queryParams)
        return response.rows.map(item => {
          return {
            'value': item.judgeName,
            'address': item.judgeId
          }
        })
      },
      handleSelect(item) {
        console.log(item);
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      async getInfoByReport(objInfo) {
        // 调用查询方法，如果excelId为空，则执行新增方法getInfoByReportId
        const response = await getInfoByReportId(objInfo)
        let jlInfo = response.data
        if(jlInfo === null){
          lqbgBsInfo(objInfo).then(response => {
            this.form = response.data
          })
        } else {
          this.selectedItems = jlInfo.deviceArr
          this.form = jlInfo
        }

      },
      // 获取设备列表信息
      async deviceList() {
        this.queryParams.deptId = 110 //组织ID
        let response = await listBsInstrument(this.queryParams)
        return response.rows.map(item => {
            return {
              'label': item.instruName,
              'key': item.instruId
            }
          })
      },
      handleChange(value) {
        this.selectedItems = this.deviceData.filter(item => value.includes(item.key));
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.buttonLoading = true;
            this.form.deviceArr = this.selectedItems
            this.form.reportId = this.obj.reportId
            if (this.form.excelId != null) {
             // 更新
             // 刷新
             updateLqLqdlsybgBsInfo(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                // 调用加载页面初始化数据方法
                this.getInfoByReport(this.obj);
                }).finally(() => {
                  this.buttonLoading = false;
                });
            } else {
              addLqLqdlsybgBsInfo(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                // 调用加载页面初始化数据方法
                this.getInfoByReport(this.obj);
              }).finally(() => {
                this.buttonLoading = false;
              });
            }
          }
        });
      },
  }
};
</script>

<style scoped lang="scss">
@import url('./style/reportForm.scss');
</style>
